<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    section {
        position: relative;
    }

    .svg1 {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100%;
        height: 95%;
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <section>
        <svg width="100%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg"
            class="transition duration-300 ease-in-out delay-150">
            <defs>
                <linearGradient id="gradient" x1="0%" y1="50%" x2="100%" y2="50%">
                    <stop offset="5%" stop-color="#F78DA7"></stop>
                    <stop offset="95%" stop-color="#8ED1FC"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,700 L 0,262 C 50.48780487804879,337.7471659223634 100.97560975609758,413.49433184472684 178,390 C 255.02439024390242,366.50566815527316 358.5853658536585,243.76983854345588 430,243 C 501.4146341463415,242.23016145654412 540.6829268292684,363.42631398144965 594,355 C 647.3170731707316,346.57368601855035 714.6829268292682,208.52490553074546 794,199 C 873.3170731707318,189.47509446925454 964.5853658536585,308.4740638955685 1046,320 C 1127.4146341463415,331.5259361044315 1198.9756097560976,235.5788388869804 1263,208 C 1327.0243902439024,180.4211611130196 1383.5121951219512,221.2105805565098 1440,262 L 1440,700 L 0,700 Z"
                stroke="none" stroke-width="0" fill="url(#gradient)" fill-opacity="1"
                class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
        </svg>
        <svg class="svg1" width="100%" height="100%" id="svg" viewBox="0 0 1440 690" xmlns="http://www.w3.org/2000/svg"
            class="transition duration-300 ease-in-out delay-150">
            <defs>
                <linearGradient id="gradient1" x1="0%" y1="50%" x2="100%" y2="50%">
                    <stop offset="5%" stop-color="red"></stop>
                    <stop offset="95%" stop-color="red"></stop>
                </linearGradient>
            </defs>
            <path
                d="M 0,700 L 0,262 C 50.48780487804879,337.7471659223634 100.97560975609758,413.49433184472684 178,390 C 255.02439024390242,366.50566815527316 358.5853658536585,243.76983854345588 430,243 C 501.4146341463415,242.23016145654412 540.6829268292684,363.42631398144965 594,355 C 647.3170731707316,346.57368601855035 714.6829268292682,208.52490553074546 794,199 C 873.3170731707318,189.47509446925454 964.5853658536585,308.4740638955685 1046,320 C 1127.4146341463415,331.5259361044315 1198.9756097560976,235.5788388869804 1263,208 C 1327.0243902439024,180.4211611130196 1383.5121951219512,221.2105805565098 1440,262 L 1440,700 L 0,700 Z"
                stroke="none" stroke-width="0" fill="url(#gradient1)" fill-opacity="1"
                class="transition-all duration-300 ease-in-out delay-150 path-0"></path>
        </svg>
    </section>

</body>

</html>